<template>
  <div>
    <ul class="nav">
      <li>
        <div style="background:#fa6a54">酒店</div>
        <div>民宿/客栈</div>
        <div>特价/爆款</div>
      </li>
      <li>
        <div style="background:#4393fa">机票</div>
        <div>机票+酒店</div>
        <div>接机/包车</div>
      </li>
      <li>
        <div style="background:#608aff">旅游</div>
        <div>门票/活动</div>
        <div>周边游</div>
      </li>
      <li>
        <div style="background:#3acab5">火车票</div>
        <div>汽车/船票</div>
        <div>租车</div>
      </li>
      <li>
        <div style="background:#ff913d">攻略/景点</div>
        <div>美食</div>
        <div>购物</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  
};
</script>

<style lang="less" scoped>
.nav {
  height: 200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  list-style: none;
  margin-top: 10px;
  li {
    height: 100%;
    width: 24%;
    text-align: center;
    background: #eee;
    div{
        height: 30%;
        line-height: 60px;
    }
  }
}
</style>